<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="../assets/img/favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>朝代管理页面</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
<!--    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
    <!-- CSS Files -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/css/light-bootstrap-dashboard.css?v=2.0.0 " rel="stylesheet" />
    <!-- CSS Just for demo purpose, don't include it in your project -->
    <link href="../assets/css/demo.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
</head>

<body>
    <div class="wrapper">
        <div class="sidebar" data-image="../assets/img/sidebar-5.jpg">
            <!--
        Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"

        Tip 2: you can also add an image using data-image tag
    -->
            <div class="sidebar-wrapper">
                <div class="logo">
                    <a href="http://www.creative-tim.com" class="simple-text">
                        诗词大王后台管理
                    </a>
                </div>
                <ul class="nav">
                    <li>
                        <a class="nav-link" href="./user.html">
                            <i class="nc-icon nc-circle-09"></i>
                            <p>编辑个人资料</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./table.html">
                            <i class="nc-icon nc-notes"></i>
                            <p>名句信息管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./poetryManager.html">
                            <i class="nc-icon nc-pin-3"></i>
                            <p>诗词信息管理</p>
                        </a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="./DynastyManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>朝代管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./KnowManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>知识管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./PoetsManag.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>诗人管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./AncientManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>古籍管理</p>
                        </a>
                    </li>
                    <li>
                        <a class="nav-link" href="./IdiomManager.html">
                            <i class="nc-icon nc-bell-55"></i>
                            <p>成语管理</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-panel">
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg " color-on-scroll="500" id="personInfo">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#pablo"> 朝代管理 </a>
                    <button href="" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                        <span class="navbar-toggler-bar burger-lines"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-end" id="navigation">
                        <ul class="nav navbar-nav mr-auto">
                            <li class="nav-item">
                                <a href="#" class="nav-link" data-toggle="dropdown">
                                    <i class="nc-icon nc-palette"></i>
                                    <span class="d-lg-none">Dashboard</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="#" class="nav-link">
                                    <i class="nc-icon nc-zoom-split"></i>
                                    <span class="d-lg-block">&nbsp;Search</span>
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-nav ml-auto">

                            <li class="nav-item">
                                <a class="nav-link" href="#pablo">
                                    <span class="no-icon" @click="signOut">退出登录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- End Navbar -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card strpied-tabled-with-hover">
                                <div class="card-header ">
                                    <h4 class="card-title">添加朝代</h4>
                                    <p class="card-category">添加朝代信息</p>
                                </div>

                                <!-- form 表单，添加管理-->
                                <div style="padding: 10px;" id="addDynasty">
                                    <form method="post" id="one" @submit.prevent="addDynasty">
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">朝代名称
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <input type="text" class="form-control" placeholder="请输入朝代名称" name="dynastyName" v-model="addDynastyVo.dynastyName">
                                        </div>
                                        <div class="input-group" style="margin-bottom: 5px">
                                            <span class="input-group-addon">朝代介绍
                                                <i class="bi bi-send-fill"></i>
                                            </span>
                                            <textarea type="text" class="form-control" placeholder="请输入朝代的介绍" name="txt" v-model="addDynastyVo.txt"></textarea>
                                        </div>
                                        <div class="text-center">
                                            <button type="submit" class="btn-default" style="width: 200px;color: orange">添加</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" id="findDynasty">
                            <div class="card card-plain table-plain-bg">
                                <div class="card-header ">
                                    <h4 class="card-title">编辑朝代</h4>
                                    <p class="card-category">对朝代进行操作</p>
                                </div>

                                <!-- 输入框 -->
                                <div class="container" >
                                    <div class="input-group">
                                        <input id="findDy" type="text" class="form-control input-lg" placeholder="请输入名句"><span class="input-group-addon btn btn-primary" @click="findDynasty"><i class="nc-icon nc-zoom-split"></i></span>
                                    </div>
                                </div>

                                <div class="card-body table-full-width table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <th>朝代</th>
                                            <th>介绍</th>
                                            <th>操作</th>
                                            <th>操作</th>
                                        </thead>
                                        <tbody>
                                            <tr v-for="dynasty in Dynastys">
                                                <td v-text="dynasty.name">先秦</td>
                                                <td class="txt" v-text="dynasty.txt">朝代介绍</td>
                                                <td><button @click="update(dynasty.id)" class="btn-success" style="color:#fff;" data-toggle="modal" data-target="#myModal">修改</button></td>
                                                <td><button @click="del(dynasty.id)" class="btn-danger" style="color: white">删除</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
<!--                                    分页展示
                                    <nav class="mt-3">
                                        <ul class="pagination pagination-sm  justify-content-center">
                                            <li class="page-item">
                                                <a class="page-link" aria-label="Previous" href="" @click.prevent="loadPage(pageinfo.prePage)">
                                                    <span aria-hidden="true">&laquo;</span>
                                                    <span class="sr-only">上一页</span>
                                                </a>
                                            </li>
                                            <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                                                <a class="page-link" href="" v-text="n" @click.prevent="loadPage(n)"
                                                   :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                                            </li>
                                            &lt;!&ndash;<li class="page-item">
                                                <a class="page-link " href="#" v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPoems(n)"
                                                   v-text="n" :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                                            </li>&ndash;&gt;
                                            <li class="page-item "><a class="page-link" href="">
                                                <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                                            </a></li>
                                            <li class="page-item">
                                                <a class="page-link" aria-label="Next" href="" @click.prevent="loadPage(pageinfo.nextPage)">
                                                    <span aria-hidden="true">&raquo;</span>
                                                    <span class="sr-only">下一页</span>
                                                </a>
                                            </li>

                                           &lt;!&ndash; <li class="page-item" >
                                                <span aria-hidden="true">跳转到</span>
                                                <input type="text" style="width: 50px" id="page"><button @click.prevent="JumpPoems()">跳转</button>
                                            </li>&ndash;&gt;
                                        </ul>
                                    </nav>-->
                                </div>

                                <!------->
                                <!-- 模态框（Modal） -->
                                <div class="modal fade col-sm-12" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">
                                                    朝代修改
                                                </h4>
                                            </div>
                                            <form  method="post" id="form_data" @submit.prevent="ModifySuccess">
                                                <div class="form-group form-row" hidden="hidden">
                                                    <label class="col-form-label">I&nbsp;&nbsp;&nbsp;D：</label>
                                                    <input  type="text" id="id" class="form-control" name="id" v-model="form1.id" disabled="disabled">
                                                </div>
                                                <div class="form-group form-row">
                                                    <label class="col-form-label">朝&nbsp;&nbsp;&nbsp;代：</label>
                                                    <input type="text" class="form-control" id="name" name="name" v-model="form1.name"/>
                                                </div>
                                                <div class="form-group form-row">
                                                    <label class="col-form-label">简&nbsp;&nbsp;&nbsp;介：</label>
                                                    <textarea type="text" class="form-control" id="txt" name="txt" v-model="form1.txt"></textarea>
                                                </div>
                                                <div class="text-center">
                                                    <button type="submit" class="btn btn-default" style="color: orange;" data-dismiss="modal">取消</button>
                                                    <button type="submit" class="btn btn-primary" style="color: green;">提交更改</button>
                                                </div>

                                            </form>
                                        </div><!-- /.modal-content -->
                                    </div><!-- /.modal -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!--   Core JS Files   -->
<script src="../assets/js/core/jquery.3.2.1.min.js" type="text/javascript"></script>
<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../assets/js/plugins/bootstrap-switch.js"></script>
<!--  Google Maps Plugin    -->
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>-->
<!--  Chartist Plugin  -->
<script src="../assets/js/plugins/chartist.min.js"></script>
<!--  Notifications Plugin    -->
<script src="../assets/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<!--<script src="../assets/js/light-bootstrap-dashboard.js?v=2.0.0 " type="text/javascript"></script>-->
<!-- Light Bootstrap Dashboard DEMO methods, don't include it in your project! -->
<script src="../assets/js/demo.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

    let m_person = new Vue({
        el:"#personInfo",
        data:{},
        methods:{
            // 退出登录
            signOut:function () {
                if (window.confirm("是否确认退出登录？？")){
                    axios({
                        url:"/user/signOut",
                        data:"GET"
                    }).then(function (r) {
                        location.href = "/login.html";
                    })
                }else {
                    return false;
                }
            }
        }
    })

    // 添加朝代信息
    let m_addDynasty = new Vue({
        el:"#addDynasty",
        data:{
            addDynastyVo:{}
        },
        methods:{
            addDynasty:function () {
                axios({
                    url:"/dynasty/addNewDynasty",
                    method:"POST",
                    data: this.addDynastyVo
                }).then(function (r) {
                    console.log(r.data)
                    if(r.data == 1){
                        if (window.confirm("你确定要进行朝代的更新吗？")){
                            return true;
                            location.href="/admin/examples/DynastyManager.html";
                        }else {
                            return false;
                        }
                    }else if (r.data == 2){
                        alert("添加成功!")
                        location.reload();  //刷新页面
                    }
                })
            }
        }
    })

    // // 查询朝代，并对朝代进行操作
    let m_Dyansty = new Vue({
        el:"#findDynasty",
        data:{
            Dynastys:[],
            pageinfo:{},
            form1:{
                id:'',
                name:'',
                txt:''
            }
        },
        methods:{
            // 模糊查询
            findDynasty:function () {
                let findDy = document.getElementById("findDy").value;
                console.log("获取的输入框值为： " + findDy);
                axios({
                    url:"/dynasty/like/"+findDy,
                    method: "post",
                }).then(function (r) {
                    m_Dyansty.Dynastys = r.data.list;
                    m_Dyansty.pageinfo = r.data
                    if ($.isEmptyObject(r.data.list)){
                        alert("查询结果为空！！")
                    }
                }).then(function () {
                    /* 超过一个字数显示省略号 */
                    $(".txt").each(function () {
                        var str = $(this).html()
                        var st = str.replace(/<[^>]+>/g,"");
                        var substr = st.substring(0,30);
                        $(this).html(substr + (str.length>30 ? '...' : ''));
                    })
                })
            },
            //删除方法
            del:function (event) {
                if (window.confirm("是否删除？？")){
                    axios({
                        url:"/dynasty/delete/"+event,
                        data:"post"
                    }).then(function (r) {
                        alert("删除成功!")
                        // location.reload();  //刷新页面
                        location.href="http://localhost:8080/admin/examples/DynastyManager.html"
                    })
                }else {
                    return false;
                }
            },
            // 点击修改按钮：
            update:function (event) {
                //console.log("获取到的id为：" + event);
                axios({
                    url:"/dynasty/findOne/"+event,
                    method:"post"
                }).then(function (r) {
                    //console.log(r.data)
                    m_Dyansty.form1.id = r.data.id;
                    m_Dyansty.form1.name = r.data.name;
                    m_Dyansty.form1.txt = r.data.txt;
                })
            },
            // 修改朝代内容
            ModifySuccess:function () {
                if (window.confirm("是否确定更新？？")){
                    axios({
                        url:"/dynasty/update",
                        method:"post",
                        data:this.form1
                    }).then(function (r) {
                        if(r.data == 1){
                            alert("更新成功！！")
                            //location.reload();
                            location.href="http://localhost:8080/admin/examples/DynastyManager.html"
                        }else {
                            alert("系统错误！！")
                            //location.reload();
                            location.href="http://localhost:8080/admin/examples/DynastyManager.html"
                        }
                    })
                }else {
                    //location.reload();
                    location.href="http://localhost:8080/admin/examples/DynastyManager.html"
                }
            }
        }
    })
</script>
</html>
